<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>P157 【例7-3】demo03.html</title>
    <style>
        .gray {
            background: #ccc;
        }

        #thick {
            font-weight: bolder;
        }
    </style>
</head>

<body>
    <div>test word.</div>
    <script>
        var ele = document.getElementsByTagName('div')[0];
        console.log('未操作前属性个数：' + ele.attributes.length);
        ele.setAttribute('align', 'center');
        ele.setAttribute('title', '测试文字');
        ele.setAttribute('class', 'gray');
        ele.setAttribute('id', 'thick');
        ele.setAttribute('style', 'font-size:24px;border:1px solid green;');
        console.log('添加属性后的属性个数：' + ele.setAttribute('style'));
        ele.removeAttribute('style');
        console.log('查看所有属性：');
        for (var i = 0; i < ele.attributes.length; ++i) {
            console.log(ele.attributes[i]);
        }
    </script>
    <a href="../首页/page07.html">
        <h2>返回上一页面</h2>
    </a>
</body>

</html>